<script setup lang="ts">
import agentService from '@/api/modules/agent'
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'

const orderType = ref('')
const orderList = ref([
  {
    label: '全部',
    value: '',
  },
  {
    label: '有效',
    value: 'valid',
  },
  {
    label: '无效',
    value: 'invalid',
  },
])

const orderQueryProxyListVos = ref([])
onShow(() => {
  getAgentList()
})

function getAgentList() {
  agentService.list({
    orderStatus: orderType.value,
  }).then((res) => {
    orderQueryProxyListVos.value = res.data.orderQueryProxyListVos
    console.log(orderQueryProxyListVos.value)
  })
}
</script>

<template>
  <div class="agent-container bg-top">
    <safe-top-container
      :padding-bottom="17"
      :padding-left="5"
    >
      <wd-navbar custom-class="!bg-transparent" title="代理商" :bordered="false" />
    </safe-top-container>
    <div class="bg-balance mx-4 mb-2 mt-4 flex items-center justify-between rounded-lg p-3">
      <div class="text-white">
        <div class="">
          <div class="text-sm">
            返佣金额（元）
          </div>
          <div class="text-[33px] text-white font-bold">
            {{ formatPrice(0) }}
          </div>
          <div class="mt-1 text-sm">
            去提现 <wd-icon name="arrow-right" size="22px" />
          </div>
        </div>
      </div>
      <wd-button size="small" custom-class="!bg-[#7487FF]">
        转余额
      </wd-button>
    </div>
    <div class="agent-list-container mx-4 mt-4 h-full rounded-lg bg-white">
      <div class="agent-tips mb-2 px-4 pt-4 text-sm text-[#415AFFFF]">
        <wd-icon name="warn-bold" size="20px" />
        系统支持至多查询一年以内的订单数据
      </div>
      <wd-tabs
        v-model="orderType"
        :animated="true"
      >
        <wd-tab
          v-for="item in orderList"
          :key="item.value"
          :title="`${item.label}订单`"
          :name="item.value"
        >
          <!--          <div class="mb-5 h-full w-full"> -->
          <!--            &lt;!&ndash;            <wd-status-tip image="content" tip="暂无订单" /> &ndash;&gt; -->
          <!--          </div> -->
        </wd-tab>
      </wd-tabs>
      <div class="h-full overflow-y-auto">
        <div
          v-for="order in orderQueryProxyListVos"
          :key="order.id"
          class="border-b border-gray-200 p-4 transition hover:bg-gray-50"
        >
          <div class="flex items-center justify-between">
            <div class="text-lg text-gray-800 font-semibold">
              {{ order.productName }}
            </div>
            <div class="flex items-center space-x-1 text-white text-sm px-2 py-0.5 rounded-full font-medium"
                 :class="{
       'bg-green-600 shadow-sm': order.orderStatus === 'vaild',
       'bg-yellow-500 shadow-sm': order.orderStatus === 'init'
     }"
            >
              <span>{{ order.orderStatusDict }}</span>
            </div>
          </div>

          <div class="mt-1 text-sm text-gray-600">
            订单号：{{ order.orderCode }}
          </div>

          <div class="mt-1 text-sm text-gray-500">
            下单时间：
            {{ order.buyDatetime ? formatTime(order.buyDatetime) : '—' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.agent-container {
  min-height: 50rpx;
}
.agent-list-container{
  height: calc(100vh - 650rpx);
}
</style>

<route lang="json5">
{
layout: 'tabbar',
}
</route>
